<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.12.1.min.js"></script>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
	<script src="http://www.zhangxinxu.com/study/down/ie-css3.htc"></script>
    <!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>SPIRIT8</title>
</head>
    <body>
    
    <div id="nav1" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">SPIRIT8</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><strong>SPIRIT8</strong></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse" id="navlist">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#index-home">HOME</a></li>
                    <li><a href="#index-about">ABOUT</a></li>
                    <li><a href="#index-TEAM">TEAM</a></li>
                    <li><a href="#index-SERVICES">SERVICES</a></li>
                    <li><a href="#index-PORTFOLIO">PORTFOLIO</a></li>
                    <li><a href="#index-TESTIMONIALS">TESTIMONIALS</a></li>
                    <li><a href="#index-CONTACT">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="s-data" class="content" data-target="#navlist">
        <div id="index-home">
            <div class="bg-linear">
                <div class="container">
                    <div class="home-container">
                        <h1 class="text-center">WELCOME ON <strong>SPIRIT8</strong></h1>
                        <p>We are a digital agency with <strong>years of experience</strong> and with <strong>extraordinary people</strong></p>
                    </div>
                </div>
                <a class="down glyphicon glyphicon-menu-down" href="#index-about"></a>
            </div>
        </div>
        <div id="index-about">
            <div class="container">
                <div class="col-md-6 col-sm-6 leftcontent">
                    <img src="images/02.png" class="img-responsive" alt="Image">
                </div>
                <div class="col-md-6 col-sm-6">
                    <h2 class="about-title"><small>ABOUT US</small><br>SOME WORDS <b>ABOUT US</b></h2>
                    <hr class="Column">
                    <p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</p>
                    <ul class="list-group">
                        <li class="list-group-item"><span class="glyphicon glyphicon-record"></span><b>Mission</b> <em>- We deliver uniqueness and quality</em></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-record"></span><b>Skills</b> <em>- Delivering fast and excellent results</em></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-record"></span><b>Clients </b> <em>- Satisfied clients thanks to our experience</em></li>
                    </ul>
                </div>

            </div>
        </div>
        <div id="index-TEAM" class="text-center">
            <div class="bg-linear">
                <div class="container ttitle">
                    <h2 class="">MEET<b> OUR TEAM</b></h2>
                    <hr class="hr1">
                    <hr class="hr2">
                </div>
                <div class="container">
                    <div id="owl-example">
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/01.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/02.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/03.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/04.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/01.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/02.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/03.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumbnail">
                                <img class="img-circle img-responsive" data-src="#" alt="" src="images/04.jpg">
                                <div class="caption">
                                    <h3>Jenn Gwapa</h3>
                                    <p>CEO / Founder</p>
                                    <p class="suoming">Do not seek to change what has come before. Seek to create that which has not.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="index-SERVICES">
        <div class="container text-center">
            <div>
                <h3>TAKE A LOOK AT <b>OUR SERVICES</b></h3>
                <hr class="hr1">
                <hr class="hr2">
                <p class="text-em"><em>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</em></p>
            </div>
            <div class="cont-log">
                <div class="col-md-3 col-sm-6 logo">
                    <div class="font-logo "><i class="iconfont-al">&#xe600;</i></div>
                    <h5>WEB DESIGN</h5>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                </div>
            </div>
            <div class="cont-log">
                <div class="col-md-3 col-sm-6 logo">
                    <div class="font-logo "><i class="iconfont-al">&#xe625;</i></div>
                    <h5>WEB DESIGN</h5>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                </div>
            </div>
            <div class="cont-log">
                <div class="col-md-3 col-sm-6 logo">
                    <div class="font-logo "><i class="iconfont-al">&#xe65a;</i></div>
                    <h5>WEB DESIGN</h5>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                </div>
            </div>
            <div class="cont-log">
                <div class="col-md-3 col-sm-6 logo">
                    <div class="font-logo "><i class="iconfont-al">&#xe607;</i></div>
                    <h5>WEB DESIGN</h5>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                </div>
            </div>
        </div>
    </div>
    <div id="index-PORTFOLIO">
        <div class="container text-center">
            <div>
                <h3>TAKE A LOOK AT <b>OUR SERVICES</b></h3>
                <hr class="hr1">
                <hr class="hr2">
                <p class="text-em"><em>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</em></p>
            </div>

            <div class="fileter clearfix">
                <h4 class="col-sm-2">FILTER BY TYPE:</h4>
                <ul id="fileter" class="col-sm-10 col-xs-12">
                    <li class="all active" data-filter=".all">ALL</li>
                    <li>|</li>
                    <li class="web" data-filter=".web">Web Design</li>
                    <li>|</li>
                    <li class="photo" data-filter=".photo">Photography</li>
                    <li>|</li>
                    <li class="mobile" data-filter=".mobile">Mobile App</li>
                    <li>|</li>
                    <li class="branding" data-filter=".branding">Branding</li>
                </ul>
            </div>
            <div id="container" class="row cont">
                <div class="col-md-3 col-sm-6 all branding web">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/01(1).jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all photo web">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/02(2).jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all branding mobile">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/03(1).jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all photo">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/04(1).jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all branding">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/05.jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all mobile web">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/06.jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all photo">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/07.jpg" alt=""></a>
                </div>
                <div class="col-md-3 col-sm-6 all mobile web">
                    <a href="javascript:void(0)"><img class="img-responsive" src="images/08.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div id="index-TESTIMONIALS" style="height: 750px; background: red;">

    </div>
    <div id="index-CONTACT" style="height: 750px; background: green;">
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>

    <script>
        //吸顶导航

        /offest/i
        $(function() {
            //导航条缩放
            var $nav = $('#nav1');
            var $down = $('#index-home .text-center').offset().top;
            var $document = $(document);
            fn_scroll();
            $document.scroll(function() {
                $document.scrollTop() >= $down ? $nav.addClass('on') : $nav.removeClass('on');
                if ($nav.hasClass('on') && !$document.is(':animated')) {
                    $nav.animate({
                        paddingTop: '0px',
                        paddingBottom: '0px'
                    }, 300);
                } else {
                    $nav.stop(true, false);
                    $nav.animate({
                        paddingTop: '10px',
                        paddingBottom: '10px'
                    }, 300);
                }
            });

            function fn_scroll() {
                $document.scrollTop() >= $down ? $nav.addClass('on') : $nav.removeClass('on');
                if ($nav.hasClass('on') && !$document.is(':animated')) {
                    $nav.animate({
                        paddingTop: '0px',
                        paddingBottom: '0px'
                    }, 300);
                } else {
                    $nav.stop(true, false);
                    $nav.animate({
                        paddingTop: '10px',
                        paddingBottom: '10px'
                    }, 300);
                }
            };

            //描点滚动+向下滑动按钮
            var $documentDown = $("#nav1 ul li a, #s-data .down")
            $documentDown.click(function() {
                //$(this).parent().addClass('active').siblings().removeClass('active');
                var $a = $($(this).attr('href')).offset().top;
                if (!$document.is(':animated')) {
                    $('body,html').animate({
                        scrollTop: $a + "px"
                    }, 800);
                }
                return false;
            });
            $('body').scrollspy({
                target: '#nav1'
            });


            //#index-TEAM轮播图owlCarousel插件
            $('#owl-example').owlCarousel({
                items: 4,
                slideSpeed: 200,
                stopOnHover: true
            })

            //index-PORTFOLIO排列布局插件isotope
            var $container = $('#container');
            var $modeLi = $('#fileter li[data-filter]');

            //初始化插件
            $container.isotope({
                filter: '*',
                animationOptions: {
                    duration: 750,
                    easing: 'linear'
                }
            });

            //执行
            $modeLi.click(function() {
                var $this = $(this);
                $this.addClass('active').siblings().removeClass('active');
                var selector = $this.attr('data-filter');
                $container.isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear'
                    }
                });
            });
        });

    </script>
</body>
</html>
